<!-- 首页 -->
<template>
  <div style="height: 100%; overflow: hidden">
    <div ref="workList">
      <div class="topTittle" @click="isOpen">
        <p>作业单</p>
        <!-- 展开 -->
        <el-icon v-if="isShow"><ArrowUpBold /></el-icon>
        <!-- 收起 -->
        <el-icon v-if="!isShow"><ArrowDownBold /></el-icon>
      </div>
      <div v-if="isShow" class="contentTop">
        <el-table
          ref="table"
          class="hd-table"
          :data="tableData"
          border
          :header-cell-style="{
            background: '#EEF5FF',
            textAlign: 'center',
            color: '#111',
            height: '68px',
          }"
        >
          <el-table-column prop="repair" label="维修项目" width="97px" />
          <el-table-column prop="planNum" label="日计划号" width="97px" />
          <el-table-column prop="planClassify" label="计划分类" width="97px" />
          <el-table-column prop="repairLevel" label="维修等级" width="97px">
            <template #default>
              <img src="@/assets/xinshuoImages/redRound.png" alt="" style="width: 12px; margin-right: 2px" />
              <span class="boldTxt">Ⅰ</span>
            </template>
          </el-table-column>
          <el-table-column prop="xianlu" label="线路" />
          <el-table-column prop="hangbie" label="行别" />
          <el-table-column prop="repairDate" label="维修日期" width="127px">
            <template #default>
              <p>2023年7月18日 一类天窗 8:00-12:00</p>
              <p class="grayTxt" style="color: #666">（共240分钟）</p>
            </template>
          </el-table-column>
          <el-table-column prop="loginAddress" label="登记地点" />
          <el-table-column prop="influenceRange" label="影响范围" />
          <el-table-column prop="xiansu" label="限速及行车方式变化" width="106px" />
          <el-table-column prop="repairPeople" label="维修单位及负责人" />
          <el-table-column prop="hezuoPeople" label="配合单位及负责人" />
          <el-table-column prop="workPeople" label="作业人员" width="182px">
            <template #default>
              <div class="txtBox">
                <p class="boldTxt">驻站联络员</p>
                <p class="grayTxt">王五</p>
                <p class="boldTxt">现场防护员【3人】</p>
                <p class="grayTxt">赵六、孙七、周八</p>
                <p class="boldTxt">线路工【8人】</p>
                <p class="grayTxt">吴九、郑十、陈十一、卫十二、姜十三、谢十四、黄十五、林十六</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 地图 -->
        <a :href="urls.getAssetsFile(`${imgUrl}`)" target="_blank" class="map">
          <!-- <div class="mapBox"> -->
          <img :src="urls.getAssetsFile(`${imgUrl}`)" alt="" class="mapImg" />
          <p class="txt">99km 380m — 99km 430m</p>
          <img src="@/assets/xinshuoImages/map.png" alt="" class="mapPosition" />
          <!-- </div> -->
        </a>
      </div>
    </div>
    <!-- 步骤 -->
    <div style="overflow: hidden">
      <div class="steps">
        <div class="stepTitle">作业记录</div>
        <div class="section_title_wrap">
          <div class="section_title">
            <div
              v-for="(title, index) in contentList"
              :key="title"
              :class="['title_item', curTitleIndex === index ? 'active' : '']"
              @click="handleSkip(index)"
            >
              <span>
                {{ title.title }}
              </span>
            </div>
          </div>
        </div>
        <!-- <div style="height: 42px;"></div> -->
        <div ref="conRef" :style="getHeight()" class="preHeight">
          <div class="content_wrap">
            <div class="content">
              <div v-for="(conItem, index) in contentList" :key="index" :ref="setItemRef">
                <div v-if="conItem.title == '点前会'">
                  <PreMeeting />
                </div>
                <div v-if="conItem.title == '作业前准备'">
                  <WorkReady :tool-arr="toolArr" :table-data="tableDataTab" :img-peoples="imgPeoples" />
                </div>
                <div v-if="conItem.title == '设置防护'">
                  <SetProtect :is-ganggui="true" />
                </div>
                <div v-if="conItem.title == '确认防护'">
                  <ConfirmProtect video-url="http://10.1.6.42:81/film/20230801-180132.mp4" />
                </div>
                <div v-if="conItem.title == '开展作业'">
                  <StartWork />
                </div>
                <div v-if="conItem.title == '结束作业'">
                  <FinishWork :table-tool="tableTool" video-url="http://10.1.6.42:81/film/finish.mp4" />
                </div>
                <div v-if="conItem.title == '总结会'">
                  <Conclude
                    :img-peoples="imgPeoples"
                    :down-list="downList"
                    video-url="http://10.1.6.42:81/film/conclude.mp4"
                  />
                </div>
              </div>
              <div class="lastHeight" :style="getHeight()"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import PreMeeting from '../../components/preMeeting.vue'
import WorkReady from '../../components/workReady.vue'
import SetProtect from '../../components/setProtect.vue'
import ConfirmProtect from '../../components/confirmProtect.vue'
import StartWork from '../../components/startWork.vue'
import FinishWork from '../../components/finishWork.vue'
import Conclude from '../../components/conclude.vue'
import urls from '@/utils/url'

// 当前的标题active的index
const curTitleIndex = ref(0)
let contentList = ref([
  { title: '点前会' },
  { title: '作业前准备' },
  { title: '设置防护' },
  { title: '确认防护' },
  { title: '开展作业' },
  { title: '结束作业' },
  { title: '总结会' },
])
// 作业前准备
let toolArr = reactive({
  tool1: [
    '锯轨机',
    '打眼机',
    '轨距尺',
    '撬棍',
    '翻轨器',
    '钢卷尺',
    '丁字扳⼿',
    '⼤锤',
    '短路铜线',
    '轨温表',
    '锂电扳⼿',
    '起拨道器',
    '组合塞尺',
    '单⼝扳⼿',
    '推轨⻋',
    '动⼒扳⼿',
    '扭矩扳⼿',
    '防护备品',
  ],
  tool2: ['钢轨', '夹板', '高强度螺栓', '垫片', '胶垫'],
})
let imgPeoples = reactive({
  // 作业前准备
  banner1: [
    {
      imgUrl: 'workReady1.png',
      name: '轨温表',
    },
    {
      imgUrl: 'workReady2.png',
      name: '抬杠',
    },
    {
      imgUrl: 'workReady3.png',
      name: '扳⼿',
    },
    {
      imgUrl: 'workReady4.png',
      name: '钢轨夹钳',
    },
  ],
  banner2: [
    {
      imgUrl: 'workReady5.png',
      name: '撬棍',
    },
    {
      imgUrl: 'workReady6.png',
      name: '起道机',
    },
    {
      imgUrl: 'workReady7.png',
      name: '轨缝调整器',
    },
    {
      imgUrl: 'workReady8.png',
      name: '30米钢卷尺',
    },
  ],
  banner3: [
    {
      imgUrl: 'workReady9.png',
      name: '轨距尺',
    },
    {
      imgUrl: 'workReady10.png',
      name: '铜导线',
    },
    {
      imgUrl: 'workReady11.png',
      name: '油脂',
    },
    {
      imgUrl: 'workReady12.png',
      name: '钢丝刷',
    },
  ],
  banner4: [
    {
      imgUrl: 'workReady13.png',
      name: '石笔',
    },
    {
      imgUrl: 'workReady1.png',
      name: '轨温表',
    },
    {
      imgUrl: 'workReady2.png',
      name: '抬杠',
    },
    {
      imgUrl: 'workReady3.png',
      name: '扳⼿',
    },
  ],
  // 总结会轮播
  bannerConclude1: [
    {
      imgUrl: 'kaoqin1.png',
      name: '王五',
      bcgTitle: '驻站联络员',
    },
    {
      imgUrl: 'kaoqin2.png',
      name: '赵六',
      bcgTitle: '现场防护员',
    },
    {
      imgUrl: 'kaoqin3.png',
      name: '吴九',
      bcgTitle: '线路工',
    },
  ],
  bannerConclude2: [
    {
      imgUrl: 'kaoqin4.png',
      name: '孙七',
      bcgTitle: '现场防护员',
    },
    {
      imgUrl: 'kaoqin5.png',
      name: '周八',
      bcgTitle: '现场防护员',
    },
    {
      imgUrl: 'kaoqin6.png',
      name: '郑十',
      bcgTitle: '线路工',
    },
  ],
  bannerConclude3: [
    {
      imgUrl: 'kaoqin7.png',
      name: '陈十一',
      bcgTitle: '线路工',
    },
    {
      imgUrl: 'kaoqin8.png',
      name: '卫十二',
      bcgTitle: '线路工',
    },
    {
      imgUrl: 'kaoqin9.png',
      name: '姜十三',
      bcgTitle: '线路工',
    },
  ],
  bannerConclude4: [
    {
      imgUrl: 'kaoqin10.png',
      name: '谢十四',
      bcgTitle: '线路工',
    },
    {
      imgUrl: 'kaoqin11.png',
      name: '黄十五',
      bcgTitle: '线路工',
    },
    {
      imgUrl: 'kaoqin9.png',
      name: '林十六',
      bcgTitle: '线路工',
    },
  ],
})
// 结束作业
const tableTool = reactive([
  { tool: '锯轨机', status: '是' },
  { tool: '丁字扳手', status: '是' },
  { tool: '打眼机', status: '是' },
  { tool: '大锤', status: '是' },
  { tool: '撬棍', status: '是' },
  { tool: '轨温表', status: '是' },
  { tool: '轨距尺', status: '是' },
  { tool: '短路铜线', status: '是' },
  { tool: '翻轨器', status: '是' },
  { tool: '锂电扳手', status: '是' },
  { tool: '组合塞尺', status: '是' },
  { tool: '动力扳手', status: '是' },
])
// 总结会下载
let downList = reactive([
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '班组管理综合台账.docx',
    txt2: '确认人:张三丰',
    url: '/files/班组管理综合台账.pdf',
    wordUrl: '/files/班组管理综合台账.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '工器具出入库记录本.docx',
    txt2: '确认人:张三丰',
    url: '/files/工器具出入库记录本.pdf',
    wordUrl: '/files/工器具出入库记录本.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '材料消耗台账.docx',
    txt2: '确认人:张三丰',
    url: '/files/生产物资出入库记录本.pdf',
    wordUrl: '/files/生产物资出入库记录本.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '现场防护通话记录.docx',
    txt2: '确认人:张三丰',
    url: '/files/现场防护通话记录.pdf',
    wordUrl: '/files/现场防护通话记录.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '钢轨重伤记录.docx',
    txt2: '上报人:张三丰',
    url: '/files/钢轨重伤记录.pdf',
    wordUrl: '/files/钢轨重伤记录.docx',
  },
])
const tableDataTab = [
  {
    use: '材料定额',
    ganggui: '3500',
    jiaban: '200',
    luoshuan: '1000',
    dianpian: '200',
    jiaodian: '100',
    cost: '32414.43',
  },
]
// 设置ref
const bodyHeight = ref(0)
let refList = reactive([])
const setItemRef = (el) => {
  if (el) {
    refList.push(el)
  }
}
let lastHeight = ref()
const init = () => {
  contentList.value.forEach((it, index) => {
    // 空盒子站位
    lastHeight.value = refList[6].clientHeight
    it.ref = `${it.key}-${index}`
    it.offsetTop = refList[index].offsetTop
  })
}

// 点击跳转

const handleSkip = (index) => {
  // 最后一个点击时不滚动
  if (index == 6) {
    tableScroll.value = false
  } else {
    tableScroll.value = true
  }
  clearInterval(timers) // 销毁定时器
  // bodyHeight.value = refList[index].offsetTop
  //便于点击获取对应tab应滚动的距离
  // 加站位20到达下一级
  if (index == 0) {
    conRef.value.scrollTop = refList[index].offsetTop
  } else {
    conRef.value.scrollTop = refList[index].offsetTop + 20
  }

  if (refList[index]) {
    nextTick(() => {
      refList[index].scrollIntoView({
        behavior: 'smooth',
        block: 'end',
        inline: 'start',
      })
    })
  }
  // 自动滚动
  setTimeout(() => {
    scrollUp(conRef.value)
  }, 300)

  curTitleIndex.value = index
}

// 监听scroll事件
const hadnleScroll = () => {
  bodyHeight.value = conRef.value.scrollTop
}
let conRef = ref('')
let tableScroll = ref(true)
let timers
const scrollUp = (tableRef) => {
  clearInterval(timers) // 销毁定时器
  timers = setInterval(() => {
    bodyHeight.value = tableRef.scrollTop
    if (tableScroll.value) {
      tableRef.scrollTop += 1
      if (tableRef.clientHeight + tableRef.scrollTop >= tableRef.scrollHeight) {
        tableRef.scrollTop = 0
      }
    }
  }, 90)
}
// 监听到滚动搞得的变化，做相应的调整
watch(bodyHeight, (val) => {
  const topList = contentList.value.map((it) => it.offsetTop)
  let index = topList.findIndex((it) => it > val) - 1
  if (index < -1) {
    index = contentList.value.length - 1
  }
  curTitleIndex.value = index
  if (curTitleIndex.value != 6) {
    tableScroll.value = true
  }
})

// 地图
let imgUrl = 'bigMap.png'
const tableData = [
  {
    repair: '更换钢轨',
    planNum: 'X2040046',
    planClassify: '维修计划',
    xianlu: '准池线',
    hangbie: '站内',
    loginAddress: '卧厂站',
    influenceRange: '封锁卧厂站24#道岔',
    xiansu: '无',
    repairPeople: '卧厂工电工区张三151xxxx1212',
    hezuoPeople: '卧厂工李四158xxxx1788',
  },
]
// 是否展示作业单
let isShow = ref(false)
// ，40上下padding
const isOpen = () => {
  isShow.value = !isShow.value
  if (isShow.value) {
    lastHeight.value = 200
    nextTick(() => {
      // window.innerHeight 浏览器内容区域高度、减去顶部作业单高度、作业记录、tab高度（含内外边边距+边框）
      preHeight.value = window.innerHeight - workList.value.offsetHeight - 44 - 68
    })
  } else {
    lastHeight.value = refList[6].clientHeight
    nextTick(() => {
      preHeight.value = window.innerHeight - workList.value.offsetHeight - 44 - 68
    })
  }
}
// 作业单
let workList = ref('')
// 获取可视高度
const getHeight = () => {
  return {
    '--preHeight': `${preHeight.value}px`,
    '--lastHeight': `${lastHeight.value - 100}px`,
  }
}
// 作业记录高度
let preHeight = ref()
onMounted(() => {
  console.log('workList.value.offsetHeight:', workList.value.offsetHeight)
  console.log('window.innerHeight :', window.innerHeight)
  if (!isShow.value) {
    preHeight.value = window.innerHeight - workList.value.offsetHeight - 44 - 68
  }
  // 初始化tab标题
  init()
  conRef.value.addEventListener('scroll', hadnleScroll)
  // 自动计时滚动
  // nextTick(() => {
  //   scrollUp(conRef.value) //整体tab滚动  定位到对应tab
  // })
})
onBeforeUnmount(() => {
  conRef.value.removeEventListener('scroll', hadnleScroll)
  clearInterval(timers) // 销毁定时器
})
</script>

<style lang="scss" scoped>
.topTittle {
  display: flex;
  align-items: center;
  background: #fff;
  height: 42px;
  font-size: 22px;
  font-family:
    Source Han Sans CN-Bold,
    Source Han Sans CN;
  font-weight: 700;
  color: #111111;
  padding-left: 20px;
  cursor: pointer;
  :deep(.el-icon) {
    color: #1d6be1;
    margin-left: 5px;
  }
}
.contentTop {
  background: #fff;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  height: 304px;
  .boldTxt {
    font-weight: 700;
    color: #333;
  }
  :deep(.el-table) {
    font-size: 16px !important;
    flex: 1 1 0%;
    text-align: center;
    height: calc(217px + 68px);
  }
  :deep(.el-table td.el-table__cell div) {
    text-align: center;
    color: #333;
  }
  :deep(.el-table__body .el-table__row) {
    height: 217px;
  }
  .txtBox {
    text-align: left !important;
    margin-left: -4px;
    line-height: 23px;
  }
  // 地图
  .map {
    width: 284px;
    height: 284px;
    margin-left: 14px;
    display: inline-block;
    position: relative;
    .txt {
      width: 210px;
      height: 31px;
      position: absolute;
      background: url('@/assets/xinshuoImages/mapBcg.png') no-repeat center/100% 100%;
      top: 0;
      left: 0;
      font-size: 14px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 31px;
      padding-left: 11px;
    }
    .mapImg {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .mapPosition {
      position: absolute;
      top: 54%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.stepTitle {
  height: 32px;
  font-size: 22px;
  font-family:
    Source Han Sans CN-Bold,
    Source Han Sans CN;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}
.steps {
  background: #fff;
  padding: 6px 20px;
  margin-top: 20px;
  :deep(.el-tabs__nav) {
    width: 100%;
    // justify-content: space-around;
  }
  :deep(.el-tabs__header) {
    margin: 0 !important;
  }
  // 选项卡
  :deep(.el-tabs__item) {
    margin: 0 30px;
    padding: 0;
  }
  // :deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
  //   margin: 0 !important;
  // }
  :deep(.el-tabs__item.is-top:nth-child(2).is-active) {
    margin-left: -11px !important;
  }
  :deep(.el-tabs__item.is-active) {
    width: 126px;
    background: url('@/assets/xinshuoImages/tabsLogo.png') no-repeat center/100% 100%;
    color: #fff;
    margin-left: 0 !important;
  }
  :deep(.el-tabs__active-bar) {
    background: transparent !important;
  }
  :deep(.el-tabs__nav-wrap) {
    border-bottom: 1px solid #1d6be1;
  }
  // 纵向轮播
  :deep(.el-carousel__container) {
    height: 600px;
  }
  // ------------- 标题 -------------------
  .section_title_wrap {
    width: 100%;
    border-bottom: 2px solid #1d6be1;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    .section_title {
      @include common_align(flex-start);
      .title_item {
        width: 142px;
        height: 100%;
        text-align: center;
        line-height: 42px;
        margin: 0 30px;
        font-size: 16px;
        font-weight: 400;
        color: #111;
        cursor: pointer;
        // min-width: 145px;
        &:first-child {
          margin: 0;
          > span:nth-child(1) {
            margin-left: -28px;
          }
        }

        &.active {
          background: url('@/assets/xinshuoImages/tabsLogo.png') no-repeat center/100% 100%;
          color: #fff;
          position: relative;
          &::after {
            content: '';
            display: inline-block;
            width: 56px;
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #1d6be1;
          }
        }
      }
    }
  }

  .content_wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    // 在这里调整contentTemp都居中，取消padding-left
    :deep(.wrap) {
      padding-left: 0;
    }
  }
}
.preHeight {
  height: var(--preHeight) !important;
  overflow-y: auto;
}
.lastHeight {
  height: var(--lastHeight);
}
</style>
